<template>
  <uni-popup :isMaskClick="showCancel" ref="confirm" type="bottom" @change="change">
	  <view class="flex flex-column align-center justify-center px-2 flex-1" style="border-radius: 10px;">
		  <view v-if="!cancelText && showCancel"  style="position: absolute;right: 0rpx;top: 0px;z-index: 99;" class="py-3 px-3" @click="close()" >
		  	<em-icon style="font-size: 38rpx;color:#B9B9B9" :unicode="'\ueb98'"></em-icon>
		  </view>
		  <view class="flex align-center justify-center flex-1">
				<view class="py-4" style="width: 750rpx;border-top-left-radius: 30rpx; border-top-right-radius: 30rpx;background-image: linear-gradient(to bottom,#FFFFFF,#FFFFFF);border: 0px solid #FFFFFF;">
					<!-- <view v-if="!cancelText && showCancel" style="position: absolute;right: 6;top: 6;" @click="close()">
						<em-icon :unicode="'\ueb98'" style="color: #4B504A;  font-size: 50rpx;"></em-icon>
					</view> -->
					<view class="flex flex-row flex-1 justify-center">
						<text class="font-weight-bold" style="color: #4B504A;font-size: 32rpx;">{{title}}</text>
					</view> 
					<view class="flex align-start mt-3 flex-1">
						<view class="flex flex-column flex-1 align-center justify-center" style="min-height: 200rpx;">
							<input v-if="type == 'nickname'" :type="type" :name="name" :adjust-position="false" :maxlength="maxLength+20" :fixed="true" :confirm-hold="true" :show-confirm-bar="false"
							class="pt-3 rounded  flex-1 py-2 px-3" 
							style="width: 90%;font-size: 28rpx;background-color: #F5F5F5;border-radius: 20rpx;height: 100%;min-height: 80rpx;border: none;" 
							 v-model="content" :placeholder="placeholder"></input>
							<textarea v-else :adjust-position="false" :maxlength="maxLength+20" :auto-focus="true" :focus="true" :fixed="true" :confirm-hold="true" :show-confirm-bar="false" 
							class="pt-3 rounded  flex-1 py-2 px-3" 
							style="width: 90%;font-size: 28rpx;background-color: #F5F5F5;border-radius: 20rpx;height: 100%;min-height: 200rpx;" 
							 v-model="content" :placeholder="placeholder"></textarea>
							 
						</view>
					</view>
					<view class="px-3 flex flex-row align-center justify-end mr-1" style="min-height: 60rpx;">
						<text v-if="tips" style="color: #ECAA3C;font-size: 26rpx;">{{tips}}</text>
						<text v-else style="color: #585858;font-size: 26rpx;">{{content.length}}/{{maxLength}}</text>
					</view>
					<!-- <view>
						<input style="height: 200rpx;width: 200rpx;" />
					</view> -->
					<view class="flex flex-row align-center flex-1 justify-between mx-4 padding-bottom-safe-area-inset-bottom">
						<view hover-class="item-hover" @click="close()" v-if="cancelText && showCancel" class=" flex align-center justify-center mx-2 py-3" @tap="close()" 
						style="background-color: #F2F2F2;border: 0px solid #FFCB9D;border-radius: 100px;flex:0.5">
							<text class="font text-muted" style="color: #292929;">{{cancelText}}</text>
						</view>
						<view  hover-class="item-hover"class="flex-1 flex align-center justify-center px-5 py-3" 
						@tap="onConfirm()" style="border: 0px solid #FFCB9D;border-radius: 10px;" :style="[$em.$getThemeStyle(['bg-color-mian'])]">
							<text class="font text-muted font-weight-bold" style="color: #fff;">{{confirmText}}</text>
						</view>
					</view>	
					<view style=" animation: all 0.2s ease-in-out;" :style="{height:KeyboardHeight+'px'}">
						
					</view>
				</view>
		  </view>
		  
		 <!-- <view @click="onConfirm()" class="mt-3 flex-1" hover-class="item-hover" style="bottom: 60rpx;padding-bottom: 10rpx;padding-left: 0rpx;padding-right: 0rpx;">
			<view class="flex-1 flex align-center justify-center mx-3 py-2" style="background-color: #FFE0C6;border: 1px solid #FFCB9D;border-radius: 5px;width: 400rpx;">
				<text class="font text-muted font-weight-bold" style="color: #4B504A;">确定</text>
			</view>
		  </view> -->
	  </view>
  </uni-popup>
</template>

<script>
  import { mapState } from 'vuex'
  let app = {}
  // #ifdef MP-WEIXIN
  app = getApp({
    allowDefault: true
  }).$vm
  // #endif
  // #ifndef MP-WEIXIN
  app = getApp({
    allowDefault: true
  })
  // #endif
  let timer = null
  export default {
    name: 'em-header',
    props: {
    },
	computed: {
	  ...mapState([
	    'systemInfo',
	  	'config',
	  	'userInfo'
	  ]),
	},
    data() {
      return {
        styles: {},
		confirm:null,
		cancel:null,
		title:"",
		iconUnicode:'',
		confirmText:'',
		content:"",
		placeholder:"请输入...",
		cancelText:"",
		maxLength:300,
		minLength:30,
		tips:"",
		KeyboardHeight:0,
		showCancel:true,
		type:"",
		name:"",
		
      }
    },
    watch: {
		content(newVal,oldvVal){
			if(this.content.length>this.maxLength){
				this.tips = `最多输入${this.maxLength}字`
			}else if(this.minLength>this.content.length){
				this.tips = `最少输入${this.minLength}字`
			}else{
				this.tips = ""
			}
			
		}
    },
	created() {
		uni.$on('onKeyboard_height_change',res =>{
			let _sysInfo = this.systemInfo;
			let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight;
			let _diff = res.height - _heightDiff;
			this.KeyboardHeight = _diff > 0 ? _diff : 0;
			if (this.KeyboardHeight > 0) {
			}
		});
	},
    methods: {
	
	  open({confirm,title,duration,cancel,showCancel,confirmText,placeholder,cancelText,content,maxLength,minLength,type,name}){
		let _this = this
		this.title = title
		this.confirmText = confirmText ||"确定"
		this.cancelText = cancelText ||""
		this.placeholder = placeholder ||"请输入..."
		this.maxLength = maxLength || 300
		this.minLength = minLength || 30
		this.content = content ||""
		this.$refs.confirm.open()
		this.confirm = confirm
		this.cancel = cancel
		this.showCancel = showCancel
		this.type = type || ""
		this.name = name || ""
		//console.log(cancel)
		if(timer)clearTimeout(timer);
		if(duration){
			 timer = setTimeout(function() {
				_this.close()
			}, duration);
		}
	  },
	  onConfirm(){
		//this.$refs.confirm.close(null) 
		if(this.tips){return}
		this.confirm&&this.confirm({content:this.content}) 
	  },
	  close(){
		this.$refs.confirm.close() 
	  },
	  change(e){
		  console.log(e)
		if(!e.show){ 
			this.cancel && this.cancel() 
		}
	  },
      clickBtn(position, index) {
        this.$emit('clickBtn', {
          position,
          index
        })
      }
    }
  }
</script>

<style>
.camera-icon{
	padding: 60rpx;
	border-radius: 30rpx;
	font-size: 32px;
}
.camera-icon-shadow{
	border-radius: 30rpx;
	font-size: 32px;
	background-color: #953921;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
}
</style>
